<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI简历分析 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }
        
        .main-container {
            padding: 2rem 0;
        }
        
        .analysis-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }
        
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 2rem;
        }
        
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 15px;
            padding: 3rem 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            margin: 2rem 0;
        }
        
        .upload-area:hover {
            border-color: #667eea;
            background-color: rgba(102, 126, 234, 0.05);
        }
        
        .upload-area.dragover {
            border-color: #667eea;
            background-color: rgba(102, 126, 234, 0.1);
            transform: scale(1.02);
        }
        
        .upload-icon {
            font-size: 4rem;
            color: #667eea;
            margin-bottom: 1rem;
        }
        
        .file-input {
            display: none;
        }
        
        .btn-upload {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 0.75rem 2rem;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-upload:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
            color: white;
        }
        
        .nav-tabs .nav-link {
            border: none;
            border-radius: 10px 10px 0 0;
            color: #6c757d;
            font-weight: 500;
        }
        
        .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }
        
        .result-section {
            margin-top: 2rem;
            padding: 2rem;
            background: rgba(248, 249, 250, 0.8);
            border-radius: 15px;
        }
        
        .info-card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-left: 4px solid #667eea;
        }
        
        .info-card h5 {
            color: #667eea;
            margin-bottom: 1rem;
            font-weight: 600;
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f8f9fa;
        }
        
        .info-item:last-child {
            border-bottom: none;
        }
        
        .info-label {
            font-weight: 500;
            color: #495057;
        }
        
        .info-value {
            color: #6c757d;
            text-align: right;
            flex: 1;
            margin-left: 1rem;
        }
        
        .analysis-text {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            white-space: pre-line;
            line-height: 1.6;
            font-size: 0.95rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .file-info {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .file-info i {
            color: #667eea;
            font-size: 1.2rem;
        }
        
        .btn-action {
            border-radius: 20px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-action:hover {
            transform: translateY(-1px);
        }
        
        .alert {
            border-radius: 10px;
            border: none;
        }
        
        .char-count {
            font-size: 0.875rem;
            color: #6c757d;
            text-align: right;
            margin-top: 0.5rem;
        }
        
        .feature-highlight {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .feature-list {
            list-style: none;
            padding: 0;
        }
        
        .feature-list li {
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
        }
        
        .feature-list li i {
            color: #667eea;
            margin-right: 0.75rem;
            font-size: 1.1rem;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/">
                <i class="bi bi-robot me-2"></i>SimpleHire
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link" href="/interview/history">面试历史</a>
                    </li>
                </ul>
                
                <ul class="navbar-nav" sec:authorize="isAuthenticated()">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
                
                <ul class="navbar-nav" sec:authorize="!isAuthenticated()">
                    <li class="nav-item">
                        <a class="nav-link" href="/login">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/register">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="main-container">
        <div class="container">
            <!-- Alerts -->
            <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <span th:text="${error}"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            
            <div th:if="${message}" class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-2"></i>
                <span th:text="${message}"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="card analysis-card">
                        <div class="card-header text-center">
                            <h1 class="mb-0">
                                <i class="bi bi-file-earmark-text me-3"></i>AI简历分析系统
                            </h1>
                            <p class="mb-0 mt-2 opacity-75">
                                上传简历文件或粘贴文本，获得专业的AI分析报告
                            </p>
                        </div>
                        
                        <div class="card-body">
                            <!-- Feature Highlight -->
                            <div class="feature-highlight" th:if="${!success}">
                                <h5 class="mb-3"><i class="bi bi-stars me-2"></i>MVP V1 核心功能</h5>
                                <div class="row">
                                    <div class="col-md-6">
                                        <ul class="feature-list">
                                            <li><i class="bi bi-check-circle"></i>简历信息自动提取</li>
                                            <li><i class="bi bi-check-circle"></i>基本信息结构化展示</li>
                                            <li><i class="bi bi-check-circle"></i>技能总结与分析</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <ul class="feature-list">
                                            <li><i class="bi bi-check-circle"></i>工作经历梳理</li>
                                            <li><i class="bi bi-check-circle"></i>项目经验总结</li>
                                            <li><i class="bi bi-check-circle"></i>简历质量评估</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Input Tabs -->
                            <ul class="nav nav-tabs" id="inputTabs" role="tablist" th:if="${!success}">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload-pane" type="button" role="tab">
                                        <i class="bi bi-cloud-upload me-2"></i>上传简历文件
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="text-tab" data-bs-toggle="tab" data-bs-target="#text-pane" type="button" role="tab">
                                        <i class="bi bi-file-text me-2"></i>粘贴简历文本
                                    </button>
                                </li>
                            </ul>
                            
                            <div class="tab-content" id="inputTabContent" th:if="${!success}">
                                <!-- File Upload Tab -->
                                <div class="tab-pane fade show active" id="upload-pane" role="tabpanel">
                                    <form id="uploadForm" th:action="@{/resume/upload}" method="post" enctype="multipart/form-data">
                                        <div class="upload-area" id="uploadArea">
                                            <div class="upload-icon">
                                                <i class="bi bi-cloud-upload"></i>
                                            </div>
                                            <h4 class="mb-3">拖拽文件到此处或点击上传</h4>
                                            <p class="text-muted mb-3">
                                                支持 PDF、DOCX 格式，文件大小不超过 10MB
                                            </p>
                                            <input type="file" id="resumeFile" name="resumeFile" class="file-input" accept=".pdf,.docx,.doc">
                                            <button type="button" class="btn btn-upload" onclick="document.getElementById('resumeFile').click()">
                                                <i class="bi bi-upload me-2"></i>选择文件
                                            </button>
                                        </div>
                                        
                                        <div id="filePreview" class="file-info" style="display: none;">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <i class="bi bi-file-earmark me-2"></i>
                                                    <div>
                                                        <div class="fw-medium" id="fileName"></div>
                                                        <small class="text-muted" id="fileSize"></small>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary btn-action">
                                                    <i class="bi bi-cpu me-2"></i>开始分析
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                
                                <!-- Text Input Tab -->
                                <div class="tab-pane fade" id="text-pane" role="tabpanel">
                                    <form id="textForm" th:action="@{/resume/analyze-text}" method="post">
                                        <div class="mb-3">
                                            <label for="resumeText" class="form-label fw-medium">
                                                <i class="bi bi-file-text me-2"></i>简历文本内容
                                            </label>
                                            <textarea class="form-control" id="resumeText" name="resumeText" rows="12" 
                                                     placeholder="请粘贴您的简历文本内容...\n\n包含以下信息将获得更好的分析效果：\n• 个人基本信息（姓名、联系方式）\n• 教育背景\n• 工作经历\n• 项目经验\n• 技能清单\n• 其他相关信息"></textarea>
                                            <div class="char-count">
                                                <span id="charCount">0</span> / 10000 字符
                                            </div>
                                        </div>
                                        
                                        <div class="text-center">
                                            <button type="submit" class="btn btn-primary btn-action" id="analyzeTextBtn">
                                                <i class="bi bi-cpu me-2"></i>开始分析
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            
                            <!-- Analysis Results -->
                            <div th:if="${success}" class="result-section">
                                <!-- File Info -->
                                <div th:if="${fileName}" class="file-info mb-3">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-file-earmark-check me-2"></i>
                                            <div>
                                                <div class="fw-medium" th:text="${fileName}"></div>
                                                <small class="text-muted" th:text="${fileSize}"></small>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-2">
                                            <a href="/resume/analysis" class="btn btn-outline-primary btn-action">
                                                <i class="bi bi-arrow-left me-2"></i>重新分析
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                
                                <div th:if="${isTextInput}" class="file-info mb-3">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-file-text me-2"></i>
                                            <div>
                                                <div class="fw-medium">文本输入</div>
                                                <small class="text-muted" th:text="${#strings.length(resumeText)} + ' 字符'"></small>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-2">
                                            <a href="/resume/analysis" class="btn btn-outline-primary btn-action">
                                                <i class="bi bi-arrow-left me-2"></i>重新分析
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                
                                <h3 class="mb-4"><i class="bi bi-graph-up me-2"></i>分析结果</h3>
                                
                                <!-- Structured Data Display -->
                                <div th:if="${structuredData}" class="row">
                                    <!-- Basic Info -->
                                    <div class="col-lg-6 mb-4" th:if="${structuredData.basicInfo}">
                                        <div class="info-card">
                                            <h5><i class="bi bi-person me-2"></i>基本信息</h5>
                                            <div th:if="${structuredData.basicInfo.name}" class="info-item">
                                                <span class="info-label">姓名</span>
                                                <span class="info-value" th:text="${structuredData.basicInfo.name}"></span>
                                            </div>
                                            <div th:if="${structuredData.basicInfo.phone}" class="info-item">
                                                <span class="info-label">电话</span>
                                                <span class="info-value" th:text="${structuredData.basicInfo.phone}"></span>
                                            </div>
                                            <div th:if="${structuredData.basicInfo.email}" class="info-item">
                                                <span class="info-label">邮箱</span>
                                                <span class="info-value" th:text="${structuredData.basicInfo.email}"></span>
                                            </div>
                                            <div th:if="${structuredData.basicInfo.location}" class="info-item">
                                                <span class="info-label">地址</span>
                                                <span class="info-value" th:text="${structuredData.basicInfo.location}"></span>
                                            </div>
                                            <!-- 兼容旧格式 -->
                                            <div th:each="item : ${structuredData.basicInfo}" class="info-item" th:if="${item.key}">
                                                <span class="info-label" th:text="${item.key}"></span>
                                                <span class="info-value" th:text="${item.value}"></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Skills -->
                                    <div class="col-lg-6 mb-4" th:if="${structuredData.skills}">
                                        <div class="info-card">
                                             <h5><i class="bi bi-gear me-2"></i>技能总结</h5>
                                             <!-- 新JSON格式 -->
                                             <div th:if="${structuredData.skills.programmingLanguages}" class="info-item">
                                                 <span class="info-label">编程语言</span>
                                                 <span class="info-value">
                                                     <span th:each="skill, iterStat : ${structuredData.skills.programmingLanguages}">
                                                         <span th:text="${skill}"></span><span th:if="${!iterStat.last}">, </span>
                                                     </span>
                                                 </span>
                                             </div>
                                             <div th:if="${structuredData.skills.frameworks}" class="info-item">
                                                 <span class="info-label">框架技术</span>
                                                 <span class="info-value">
                                                     <span th:each="skill, iterStat : ${structuredData.skills.frameworks}">
                                                         <span th:text="${skill}"></span><span th:if="${!iterStat.last}">, </span>
                                                     </span>
                                                 </span>
                                             </div>
                                             <div th:if="${structuredData.skills.databases}" class="info-item">
                                                 <span class="info-label">数据库</span>
                                                 <span class="info-value">
                                                     <span th:each="skill, iterStat : ${structuredData.skills.databases}">
                                                         <span th:text="${skill}"></span><span th:if="${!iterStat.last}">, </span>
                                                     </span>
                                                 </span>
                                             </div>
                                             <div th:if="${structuredData.skills.tools}" class="info-item">
                                                 <span class="info-label">工具</span>
                                                 <span class="info-value">
                                                     <span th:each="skill, iterStat : ${structuredData.skills.tools}">
                                                         <span th:text="${skill}"></span><span th:if="${!iterStat.last}">, </span>
                                                     </span>
                                                 </span>
                                             </div>
                                             <!-- 兼容旧格式 -->
                                             <div th:each="item : ${structuredData.skills}" class="info-item" th:if="${item.key}">
                                                 <span class="info-label" th:text="${item.key}"></span>
                                                 <span class="info-value" th:text="${item.value}"></span>
                                             </div>
                                         </div>
                                    </div>
                                    
                                    <!-- Education -->
                                    <div class="col-lg-6 mb-4" th:if="${structuredData.education}">
                                        <div class="info-card">
                                            <h5><i class="bi bi-mortarboard me-2"></i>教育经历</h5>
                                            <div th:each="edu : ${structuredData.education}" class="mb-3">
                                                <div class="info-item">
                                                    <span class="info-label">学校</span>
                                                    <span class="info-value" th:text="${edu.school}"></span>
                                                </div>
                                                <div class="info-item" th:if="${edu.degree}">
                                                    <span class="info-label">学位</span>
                                                    <span class="info-value" th:text="${edu.degree}"></span>
                                                </div>
                                                <div class="info-item" th:if="${edu.major}">
                                                    <span class="info-label">专业</span>
                                                    <span class="info-value" th:text="${edu.major}"></span>
                                                </div>
                                                <div class="info-item" th:if="${edu.graduationYear}">
                                                    <span class="info-label">毕业年份</span>
                                                    <span class="info-value" th:text="${edu.graduationYear}"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Work Experience -->
                                    <div class="col-lg-6 mb-4" th:if="${structuredData.workExperience}">
                                        <div class="info-card">
                                            <h5><i class="bi bi-briefcase me-2"></i>工作经历</h5>
                                            <!-- 新JSON格式 -->
                                            <div th:if="${#lists.size(structuredData.workExperience) > 0}" th:each="work : ${structuredData.workExperience}" class="mb-3">
                                                <div class="info-item">
                                                    <span class="info-label">公司</span>
                                                    <span class="info-value" th:text="${work.company}"></span>
                                                </div>
                                                <div class="info-item" th:if="${work.position}">
                                                    <span class="info-label">职位</span>
                                                    <span class="info-value" th:text="${work.position}"></span>
                                                </div>
                                                <div class="info-item" th:if="${work.duration}">
                                                    <span class="info-label">工作时间</span>
                                                    <span class="info-value" th:text="${work.duration}"></span>
                                                </div>
                                                <div class="info-item" th:if="${work.description}">
                                                    <span class="info-label">工作描述</span>
                                                    <span class="info-value" th:text="${work.description}"></span>
                                                </div>
                                            </div>
                                            <!-- 兼容旧格式 -->
                                            <div th:if="${#strings.length(structuredData.workExperience) > 0}" class="info-value" th:text="${structuredData.workExperience}"></div>
                                        </div>
                                    </div>
                                    
                                    <!-- Project Experience -->
                                    <div class="col-lg-6 mb-4" th:if="${structuredData.projects}">
                                        <div class="info-card">
                                            <h5><i class="bi bi-code-square me-2"></i>项目经验</h5>
                                            <div th:each="project : ${structuredData.projects}" class="mb-3">
                                                <div class="info-item">
                                                    <span class="info-label">项目名称</span>
                                                    <span class="info-value" th:text="${project.name}"></span>
                                                </div>
                                                <div class="info-item" th:if="${project.description}">
                                                    <span class="info-label">项目描述</span>
                                                    <span class="info-value" th:text="${project.description}"></span>
                                                </div>
                                                <div class="info-item" th:if="${project.technologies}">
                                                    <span class="info-label">技术栈</span>
                                                    <span class="info-value">
                                                        <span th:each="tech, iterStat : ${project.technologies}">
                                                            <span th:text="${tech}"></span><span th:if="${!iterStat.last}">, </span>
                                                        </span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 兼容旧格式的项目经验 -->
                                    <div class="col-lg-6 mb-4" th:if="${structuredData.projectExperience and #strings.length(structuredData.projectExperience) > 0}">
                                        <div class="info-card">
                                            <h5><i class="bi bi-code-square me-2"></i>项目经验</h5>
                                            <div class="info-value" th:text="${structuredData.projectExperience}"></div>
                                        </div>
                                    </div>
                                    
                                    <!-- Evaluation -->
                                    <div class="col-12 mb-4" th:if="${structuredData.evaluation}">
                                        <div class="info-card">
                                            <h5><i class="bi bi-clipboard-check me-2"></i>简历评估</h5>
                                            <div th:each="item : ${structuredData.evaluation}" class="info-item">
                                                <span class="info-label" th:text="${item.key}"></span>
                                                <span class="info-value" th:text="${item.value}"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Raw Analysis Result -->
                                <div class="mb-4">
                                    <h5 class="mb-3"><i class="bi bi-file-text me-2"></i>详细分析报告</h5>
                                    <div class="analysis-text" th:text="${analysisResult}"></div>
                                </div>
                                
                                <!-- Action Buttons -->
                                <div class="text-center mt-4">
                                    <div class="d-flex flex-wrap gap-3 justify-content-center">
                                        <a href="/resume/analysis" class="btn btn-primary btn-action">
                                            <i class="bi bi-arrow-clockwise me-2"></i>重新分析
                                        </a>
                                        <a href="/interview" class="btn btn-success btn-action">
                                            <i class="bi bi-play-circle me-2"></i>开始面试
                                        </a>
                                        <button class="btn btn-info btn-action" onclick="window.print()">
                                            <i class="bi bi-printer me-2"></i>打印报告
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // File upload handling
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('resumeFile');
        const filePreview = document.getElementById('filePreview');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        
        // Text input handling
        const resumeText = document.getElementById('resumeText');
        const charCount = document.getElementById('charCount');
        const analyzeTextBtn = document.getElementById('analyzeTextBtn');
        
        // File input change event
        if (fileInput) {
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    fileName.textContent = file.name;
                    fileSize.textContent = formatFileSize(file.size);
                    filePreview.style.display = 'block';
                    uploadArea.style.display = 'none';
                }
            });
        }
        
        // Drag and drop events
        if (uploadArea) {
            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.classList.add('dragover');
            });
            
            uploadArea.addEventListener('dragleave', () => {
                uploadArea.classList.remove('dragover');
            });
            
            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    fileInput.files = files;
                    fileInput.dispatchEvent(new Event('change'));
                }
            });
        }
        
        // Text input character count
        if (resumeText) {
            resumeText.addEventListener('input', function() {
                const count = this.value.length;
                charCount.textContent = count;
                
                if (count > 10000) {
                    charCount.style.color = '#dc3545';
                    analyzeTextBtn.disabled = true;
                } else {
                    charCount.style.color = '#6c757d';
                    analyzeTextBtn.disabled = false;
                }
            });
        }
        
        // Format file size
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
        }
        
        // Reset file upload
        function resetFileUpload() {
            if (fileInput) fileInput.value = '';
            if (filePreview) filePreview.style.display = 'none';
            if (uploadArea) uploadArea.style.display = 'block';
        }
    </script>
</body>
</html>